<template>
	<view>
		<!--#ifdef APP-PLUS-->
		<view class="lz-status_bar">
			<view class="lz-top_view"></view>
		</view>
		<!--#endif-->
		<view class="kaoshi-head">
			<view class="kaoshi-head-top">
				<view class="kaoshi-head-left">
					<view class="iconfont icon-zuojiantou" @tap="$navigateBack"></view>
				</view>
				<view class="kaoshi-head-m">考试报告</view>
			</view>
		</view>
		<view class="kaoshi-bg" style="background-image: url('')">
			<view class="kaoshi-question-over">
				<view class="endtime">交卷时间：{{up_time}}</view>
				<view class="kaoshi-baogao">
					<circle-progress-bar :animate="false" :border_width="5" border_color="#3c7bfc" :size="125"
						border_back_color="#f3f3f3" :pro="pages_params.dadui_num/pages_params.total_num ">
						<!-- content -->
						<view class="kaoshi-baogao-title">
							<view class="kaoshi-baogao-title-l">{{pages_params.score}}</view>分
						</view>
					</circle-progress-bar>
				</view>
				<view class="kaoshi-question-over-content">
					<view class="kaoshi-question-over-content-flex">
						<view>考试时间</view>
						<view class="kaoshi-question-over-content-text">{{use_time}}</view>
					</view>
					<view class="flexline"></view>
					<view class="kaoshi-question-over-content-flex">
						<view>答对题数</view>
						<view class="kaoshi-question-over-content-text">{{pages_params.dadui_num}}</view>
					</view>
					<view class="flexline"></view>
					<view class="kaoshi-question-over-content-flex">
						<view>总分数</view>
						<view class="kaoshi-question-over-content-text">{{pages_params.total_num}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import circleProgressBar from '@/components/circle-progress-bar/circle-progress-bar.vue'
	export default {
		data() {
			return {
				pages_params: {},
				jiaojuaninfo: {}
			}
		},
		computed: {
			up_time() {
				let start = this.pages_params.up_time || 0
				let sec = start;
				let date = new Date(start * 1000)
				let yy = date.getFullYear();
				let mm = date.getMonth() + 1;
				let dd = date.getDate();
				let hour = date.getHours();
				let miu = date.getMinutes();
				let s = date.getSeconds();
				// formatDigit
				mm = this.$myUtils.$common.formatDigit(mm)
				dd = this.$myUtils.$common.formatDigit(dd)
				hour = this.$myUtils.$common.formatDigit(hour)
				miu = this.$myUtils.$common.formatDigit(miu)
				s = this.$myUtils.$common.formatDigit(s)
				return `${yy}-${mm}-${dd} ${hour}:${miu}:${s}`
			},
			use_time() {
				//usetime
				let start = this.pages_params.usetime || 0
				let hour = parseInt(start / 3600);
				let miu = parseInt((start - hour * 3600) / 60);
				let s = start - hour * 3600 - miu * 60;
				// formatDigit
				hour = this.$myUtils.$common.formatDigit(hour)
				miu = this.$myUtils.$common.formatDigit(miu)
				s = this.$myUtils.$common.formatDigit(s)
				return `${hour}:${miu}:${s}`
			}
		},
		components: {},
		onLoad(opts) {
			this.pages_params = this.$myCatch.getItem("jiaojuan_info")

		},
		methods: {
			tap_handler(type) {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	};
</script>

<style>
	page {
		background: #f6f6f6;
	}

	.kaoshi-bg {
		background-position: top;
		background-size: 100%;
		background-repeat: no-repeat;
		padding: 20px 15px 0;
	}

	.endtime {
		font-size: 14px;
		color: #aaa;
	}

	/*练习报告*/
	.kaoshi-question-over {
		background-color: #fff;
		padding: 15px 20px 25px;
		border-radius: 8px;
	}

	.kaoshi-question-over-content {
		display: flex;
		width: 100%;
		margin: 0 auto;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
		color: #9a9a9a;
	}

	.kaoshi-question-over-content-flex {
		flex: 1;
		text-align: center;
	}

	.kaoshi-question-over-content-text {
		color: #000;
		font-size: 20px;
		padding-top: 4px;
	}

	.kaoshi-baogao {
		margin: 25px auto 30px;
		text-align: center;
		color: #000;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.kaoshi-baogao-title {
		display: flex;
		justify-content: center;
		align-items: baseline;
		font-size: 14px;
	}

	.kaoshi-baogao-title-l {
		font-size: 28px;
		margin-right: 1px;
	}

	.kaoshi-baogao-text {
		margin-top: 5px;
		font-size: 12px;
		color: #aaa;
		letter-spacing: .5px;
	}

	.flexline {
		height: 25px;
		border-right: 1px solid #f3f3f3;
	}
</style>
